// import React from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { Tabs } from "antd";
import type { TabsProps } from "antd";
import qs from "query-string";
type Props = {};

const items: TabsProps["items"] = [
  {
    key: "1",
    label: "产品1",
  },
  {
    key: "2",
    label: "产品2",
  },
  {
    key: "3",
    label: "产品3",
  },
];

export default function Product({}: Props) {
  const navigate = useNavigate();
  const onChange = (key: string) => {
    console.log(`/prod/p${key}`);
    // 方法1：
    navigate(`/prod/p${key}`);
    // 方法2：路由传参
    // navigate(`/prod/p${key}?name=三丰&score=100`);
    let user = {
      name: "三丰",
      score: 100,
    };
    let query = qs.stringify(user);
    navigate(`/prod/p${key}?${query}`);
  };
  return (
    <div>
      <h1>商品主组件</h1>
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      <Outlet />
    </div>
  );
}
